@extends('home.layouts.master')
@section('css')
    <style>
         .avatar {
            position: relative;
        }

        .change-bgb {
            position: absolute;
            right: 0;
        }
    </style>
@endsection
@section('title', '个人中心')
<body background= {{$info->bgd?url($info->bgd):'/images/background/4.jpeg'}}>
@section('content')
    <div class="mdui-container mdui-m-t-5">
        <div class="mdui-row">
            {{--头像--}}
            @include('home.layouts.profile_avatar')
            {{--关注 取消关注按钮--}}
            @include('home.layouts.profile_guanzhu')
            {{--左栏--}}
            <div class="mdui-col-md-3 mdui-col-offset-md-1">
                {{--菜单--}}
                @include('home.layouts.profile_menu')
            </div>
            {{--右栏--}}
            <div class="mdui-col-md-7">
                {{--微博列表--}}
                @if(isset($records))
                    <div id="weibo_list">
                        @foreach($records as $data)
                            @include('home.layouts.weibo')
                        @endforeach
                    </div>
                @endif

                {{--收藏列表--}}
                @if(isset($favorites))
                    <div id="favorite_list">
                        @foreach($favorites as $data)
                            @include('home.layouts.weibo')
                        @endforeach
                    </div>
                @endif

                {{--关注列表--}}
                @if(isset($follow))
                    <div id="follow_list">
                        <div class="warp weibo_item mdui-shadow-2 mdui-m-b-2">
                            <!-- 关注模版 -->
                            <div class="mdui-row-xs-3">
                                @foreach($follow as $data)
                                    @include('home.layouts.profile_follow')
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                {{--粉丝列表--}}
                @if(isset($fans))
                    <div id="fans_list">
                        @foreach($fans as $data)
                            @include('home.layouts.profile_fans')
                        @endforeach
                    </div>
                @endif

                {{--账户管理--}}
                @if(isset($details))
                    <div id="account_setting">
                        @include('home.layouts.profile_setting')
                    </div>
                @endif
            </div>
        </div>
    </div>
</body>
@endsection
@section('js')
    <script>
        //关注按钮
        $('.btn-follow').click(function () {
            //关注节点
            var follow = $(this).find('span'),
                //当前用户id
                user_id = $(this).parent().attr('user_id');

            //取消关注
            if ($(this).attr('do') === 'cancel') {
                $(this).removeClass('mdui-text-color-orange');
                follow.text('关注');
                $(this).attr('do', 'follow');
                $.get('/u/' + {{Session::get('user.id')}} +'/follow/' + user_id + '/destroy');
                return;
            }

            //关注
            $(this).addClass('mdui-text-color-orange');
            follow.text('取消关注');
            $(this).attr('do', 'cancel');
            $.get('/u/' + {{Session::get('user.id')}} +'/follow/' + user_id + '/update');
        });
        //移除粉丝按钮
        $('.btn-removeFans').click(function () {
            //移除粉丝节点
            var rmvFans = $(this).find('span'),
                //该粉丝节点
                fans = $(this).parent().parent().parent().parent();
            //该粉丝id
            fans_id = fans.attr('user_id');

            //移除粉丝
            if ($(this).attr('do') === 'remove') {
                $.get('/u/' + {{Session::get('user.id')}} +'/fans/' + fans_id + '/destroy');
                fans.fadeout();
            }
        });
        //获取省级列表
        $(document).ready(function () {
            //获取所在省份的level
            var level = $("#pro").attr('level');
            $.ajax({
                url: '{{url('/u/'.Session::get('user.id').'/edit/pro')}}',
                dataType: 'json',
                data: {'level': level},
                success: function (data) {
                    if (data.status) {
                        //循环添加option
                        $.each(data.message, function (k, v) {
                            var o = document.createElement('option');
                            o.value = v.id;
                            o.text = v.name;
                            try {
                                $("#pro").append(o); // standards compliant
                            }
                            catch (ex) {
                                $("#pro").append(o); // IE only
                            }
                        });
                    }
                }
            });
        });
        //创建省市联动菜单
        $("#pro").change(function () {
            //将上一次查询结果清空
            $("#city").empty();
            $("#county").empty();
            //用ajax从数据库查询出所有城市列表
            var upid = $(this).attr('value');
            console.log(upid);
            //根据upid来查城市列表
            $.ajax({
                url: '{{url('/u/'.Session::get('user.id').'/edit/city')}}',
                dataType: 'json',
                data: {'upid': upid},
                success: function (data) {
                    if (data.status) {
                        //循环添加option
                        $.each(data.message, function (k, v) {
                            var o = document.createElement('option');
                            o.value = v.id;
                            o.text = v.name;
                            try {
                                $("#city").append(o); // standards compliant
                            }
                            catch (ex) {
                                $("#city").append(o); // IE only
                            }
                        });
                        $.each(data.message1, function (k, v) {
                            var o = document.createElement('option');
                            o.value = v.id;
                            o.text = v.name;
                            try {
                                $("#county").append(o); // standards compliant
                            }
                            catch (ex) {
                                $("#county").append(o); // IE only
                            }
                        });
                    }
                },
                error: function (data) {
                    alert('获取失败');
                }
            });
        });
        //创建省市县动菜单
        $("#city").change(function () {
            //将上一次查询结果情况
            $("#county").empty();
            //用ajax从数据库查询出所有区县列表
            var upid = $(this).attr('value');
            //根据upid来查区县列表
            $.ajax({
                url: '{{url('/u/'.Session::get('user.id').'/edit/county')}}',
                dataType: 'json',
                data: {'upid': upid},
                success: function (data) {
                    if (data.status) {
                        //循环添加option
                        $.each(data.message, function (k, v) {
                            var o = document.createElement('option');
                            o.value = v.id;
                            o.text = v.name;
                            try {
                                $("#county").append(o); // standards compliant
                            }
                            catch (ex) {
                                $("#county").append(o); // IE only
                            }
                        });
                    }
                },
                error: function (data) {
                    alert('获取失败');
                }
            });
        });
    </script>
@endsection